<template>
    <!-- 导航区域 -->
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>论坛管理</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
    <!-- 搜索区域 -->
    <div style="margin: 10px 0">
    <el-button type="primary" style="margin-right: 20px;" @click="addopen"><el-icon><Plus /></el-icon>添加文章信息</el-button>
    <el-input style="width: 200px; cursor: pointer" suffix-icon="el-icon-search" placeholder="文章id" v-model="id"></el-input>
    <el-input style="width: 200px; cursor: pointer" suffix-icon="el-icon-search" placeholder="发布人用户名" v-model="useraccount"></el-input>
    <el-button type="primary" @click="getarticleList">搜 索</el-button>
    <el-button type="warning" @click="reset">重 置</el-button>
  </div>
  <!-- 主体区域 -->
  <el-table :data="articleList" border style="width: 100%">
    <el-table-column type="index"></el-table-column>
    <el-table-column label="文章id" prop="id" width="100%"/>
    <el-table-column label="发布人用户名" prop="useraccount" width="120%"/>
    <el-table-column label="文章标题" prop="articletitle" width="300%"/>
    <el-table-column label="文章正文" prop="articlemain" width="540%"/>
<!--    <el-table-column label="文章图片" prop="articleimg" />-->
    <el-table-column label="文章图片" width="90%">
      <template #default="scope">
        <img
            v-if="scope.row.articleimg"
            :src="scope.row.articleimg"
            style="height: 40px; width: 40px; border-radius: 80%"
        />
        <span v-else>暂无</span>
      </template>
    </el-table-column>
    <el-table-column label="文章类型" prop="articletype" width="90%"/>
<!--    <el-table-column label="文章是否审核" prop="articleisyes" width="120%"/>-->
    <el-table-column label="文章是否审核" width="155%">
      <template #default="scope">
        <div v-if="scope.row.articleisyes == 1">
          已审核，通过
        </div>
        <div v-else-if="scope.row.articleisyes == -1">
          已审核，不通过
        </div>
        <div v-else>
          等待审核<el-button size="small" type="primary" @click="handleEditpass(scope.row)">管 理</el-button>
        </div>
      </template>
    </el-table-column>
<!--    <el-table-column label="用户头像" prop="userphoto" />-->
    <el-table-column label="用户头像" width="90%">
      <template #default="scope">
        <img
            v-if="scope.row.userphoto"
            :src="scope.row.userphoto"
            style="height: 40px; width: 40px; border-radius: 80%"
        />
        <span v-else>暂无</span>
      </template>
    </el-table-column>
    <el-table-column align="center" label="操作" width="180%">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row.id)">修 改</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删 除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页区域 -->
  <div>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" v-model:current-page="pageNum"
                   :page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </div>
  <!-- 新增区域 -->
  <el-dialog v-model="dialogVisible" title="文章信息" width="30%">
    <el-form label-width="85px" size="small">
      <el-form-item label="文章id">
        <el-input size="small" v-model="form.id" type="text" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="发布人用户名">
        <el-input size="small" v-model="form.useraccount" type="text" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="文章标题">
        <el-input v-model="form.articletitle" type="articletitle" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="文章正文">
        <el-input v-model="form.articlemain" type="text" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="上传文章图片">
        <el-upload
            class="avatar-uploader"
            ref="upload"
            action="#"
            :show-file-list="false"
            :on-change="handleChange"
            :auto-upload="false"
            list-type="picture-card"
        >
          <img
              v-if="form.articleimg"
              :src="form.articleimg"
              class="avatar"
              width="148"
              height="148"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="文章类型">
        <el-input v-model="form.articletype" type="text" autocomplete="off"></el-input>
      </el-form-item>
<!--      <el-form-item label="文章是否审核">-->
<!--        <el-input v-model="form.articleisyes" type="text" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->
    </el-form>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 认</el-button>
        </span>
    </template>
  </el-dialog>
  <!-- 审核区域 -->
  <el-dialog title="活动审批" v-model="dialogFormVisiblepass" width="30%">
    <el-form label-width="150px" size="small">
      审核活动
      <el-select v-model="form.articleisyes" placeholder="请选择">
        <el-option  v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
        </el-option>
      </el-select>
    </el-form>
    <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisiblepass = false">取 消</el-button>
            <el-button type="primary" @click="save">确 认</el-button>
          </span>
    </template>
  </el-dialog>
</template>
<script>
export default{
  name: "ArticleView",
  data() {
    return {
      articleList: [],
      dialogVisible: false,
      dialogFormVisiblepass: false,
      form: {},
      id: "",
      useraccount: '',
      pageNum: 1,
      pageSize: 5,
      total: 0,
      options: [{
        value: '1',
        label: '已审核，通过'
      }, {
        value: '-1',
        label: '已审核，不通过'
      },{
        value: '0',
        label: '等待审批'
      }],
    }
  },
  created() {
    this.getarticleList();
  },
  methods:{
    //新增宠物框打开方法
    addopen(){
      this.form = {};
      this.dialogVisible =true;
    },
    //搜索框重置方法
    reset() {
      (this.id = ""), (this.useraccount = ''), this.getarticleList();
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getarticleList();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.getarticleList();
    },
    handleChange(file) {
      const isJPG = file.raw.type.indexOf("image") !== -1;
      const isLt2M = file.raw.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
        return;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return;
      }
      this.form.articleimg = file.url;
      this.file = file;
    },
    //修改模态框展开并且获取原本数据方法
    handleEdit(articleid) {
      this.dialogVisible = true;
      this.$http.get("/article/" + articleid).then((res) => {
        if (res.data.status == 200) {
          this.form = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    //删除宠物方法
    handleDelete(articleid) {
      this.$http.delete("/article/" + articleid).then((res) => {
        if (res.data.status == 200) {
          this.$message.success("删除成功"),
              this.getarticleList();
        } else {
          this.$message.error("删除失败");
        }
      });
    },
    //修改新增同一个方法
    save() {
      if(this.file!=null){
      let fromdata = new FormData();
      fromdata.append("file", this.file.raw);
      this.$http.post("/oss/upload", fromdata).then((ress) => {
        if (ress.data.status == 200) {
          this.form.articleimg = ress.data.data;
          this.$http.post("/article/", this.form).then((res) => {
            if (res.data.status == 200) {
              this.$message.success("保存成功"),
                  (this.dialogVisible = false),
                  this.dialogFormVisiblepass = false;
                  this.getarticleList();
            } else {
              this.$message.error(res.data.message);
            }
          });
        } else {
          this.$message.error(ress.data.message);
          return false;
        }
      });
    }else{
      this.$http.post("/article/", this.form).then((res) => {
            if (res.data.status == 200) {
              this.$message.success("保存成功"),
                  (this.dialogVisible = false),
                  this.dialogFormVisiblepass = false;
                  this.getarticleList();
            } else {
              this.$message.error(res.data.message);
            }
          });
    }
    },
    //获取评论列表
    getarticleList() {
      //请求分页查询数据
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        id: this.id,
        useraccount: this.useraccount,
      };
      this.$http.get("/article/page", { params }).then((res) => {
        console.log(res);
        if (res.data.status == 200) {
          this.articleList = res.data.data.records;
          this.total = res.data.data.total;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    //审批弹窗
    handleEditpass(row) {
      this.form = row,
          this.dialogFormVisiblepass = true;
    },
  }
}
</script>
<style>
.avatar-uploader {
  text-align: center;
  padding-bottom: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  line-height: 128px;
  text-align: center;
}

.avatar {
  display: block;
}
</style>